<template>
  <div class="admin-layout" :class="{ 'mobile': appStore.device === 'mobile' }">
    <!-- 顶部导航栏 -->
    <div class="layout-header">
      <AppHeader />
    </div>
    
    <!-- 主体容器 -->
    <div class="layout-container">
      <!-- 侧边栏 -->
      <div 
        class="layout-sidebar" 
        :class="{ 
          'collapsed': appStore.collapsed,
          'mobile-hidden': appStore.device === 'mobile' && !appStore.mobileMenuVisible
        }"
      >
        <AppSidebar />
      </div>
      
      <!-- 移动端遮罩 -->
      <div 
        v-if="appStore.device === 'mobile' && appStore.mobileMenuVisible"
        class="mobile-overlay"
        @click="appStore.closeMobileMenu"
      ></div>
      
      <!-- 主内容区域 -->
      <div class="layout-main">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { useAppStore } from '@/stores/app'
import AppHeader from './components/AppHeader.vue'
import AppSidebar from './components/AppSidebar.vue'

const appStore = useAppStore()

// 响应式处理
const handleResize = () => {
  const width = window.innerWidth
  if (width < 768) {
    appStore.setDevice('mobile')
  } else if (width < 1024) {
    appStore.setDevice('tablet')
  } else {
    appStore.setDevice('desktop')
  }
}

onMounted(() => {
  handleResize()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style lang="scss" scoped>
.admin-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .layout-header {
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    z-index: 1000;
    position: relative;
  }

  .layout-container {
    flex: 1;
    display: flex;
    overflow: hidden;

    .layout-sidebar {
      width: 240px;
      background: #001529;
      transition: all 0.3s;
      position: relative;
      z-index: 999;

      &.collapsed {
        width: 64px;
      }

      &.mobile-hidden {
        transform: translateX(-100%);
      }
    }

    .mobile-overlay {
      position: fixed;
      top: 60px;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 998;
    }

    .layout-main {
      flex: 1;
      background: #f5f7fa;
      overflow: auto;
      padding: 20px;
    }
  }

  &.mobile {
    .layout-container {
      .layout-sidebar {
        position: fixed;
        top: 60px;
        left: 0;
        bottom: 0;
        width: 240px;
        z-index: 999;

        &.collapsed {
          width: 240px;
        }
      }

      .layout-main {
        margin-left: 0;
      }
    }
  }
}
</style>